<template>
  <div class="drawer-container">
    <el-drawer v-model="drawer">
      <template #header>
        <p>分配角色用户</p>
      </template>

      <el-form>
        <el-form-item label="用户姓名">
          <el-input disabled v-model="formData.username" />
        </el-form-item>
        <el-form-item label="角色列表">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >
            全选
          </el-checkbox>
          <div class="w-full">
            <el-checkbox-group
              v-model="formData.assignRoles"
              @change="handleCheckChange"
            >
              <!-- 
                label 
                  代表要渲染的文本和选中的值
                  当你指定插槽，插槽权重更高
              -->
              <el-checkbox
                v-for="role in allRolesList"
                :key="role.id"
                :label="role.id"
              >
                {{ role.roleName }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup name="AssignRoleDrawer">
import { ref, reactive } from 'vue'
import type { User } from '@/api/acl/types'
import { assignUserRole, getUserRole } from '@/api/acl/user'
import { ElMessage } from 'element-plus'

const drawer = ref(false)
// 全选
const checkAll = ref(false)
// 半选
const isIndeterminate = ref(false)

// 全选&全不选
const handleCheckAllChange = (val: boolean) => {
  // 将半选改为false
  isIndeterminate.value = false

  if (val) {
    // 全选
    formData.assignRoles = allRolesList.value.map((role) => role.id)
  } else {
    // 全不选
    formData.assignRoles = []
  }
}

const handleCheckChange = () => {
  // 全不选
  // checkAll.value = false
  // isIndeterminate.value = false

  // 全选
  // checkAll.value = true
  // isIndeterminate.value = false

  // 半选
  // checkAll.value = false
  // isIndeterminate.value = true
  if (formData.assignRoles.length === 0) {
    // 全不选
    checkAll.value = false
    isIndeterminate.value = false
  } else if (formData.assignRoles.length === allRolesList.value.length) {
    // 全选
    checkAll.value = true
    isIndeterminate.value = false
  } else {
    // 半选
    checkAll.value = false
    isIndeterminate.value = true
  }
}

const close = () => {
  drawer.value = false
}

// 这里类型暂定为 any，因为数据还不知道所有内容，等将来写好了在定义类型
const formData = reactive<any>({
  userId: undefined,
  username: '',
  // 选中角色
  assignRoles: [],
})

const open = (row: User.AddUserParams) => {
  drawer.value = true
  formData.userId = row.id
  formData.username = row.username
  getList()
}

// 所有角色列表
const allRolesList = ref<User.RoleList>([])

// 获取角色数据
const getList = async () => {
  const res = await getUserRole(formData.userId)
  allRolesList.value = res.data.allRolesList
  // 注意：已选中的角色数据只需要 id
  formData.assignRoles = res.data.assignRoles.map((role) => role.id)
}

const emit = defineEmits(['success'])

// 确定
const submit = async () => {
  await assignUserRole(formData.userId, formData.assignRoles)
  ElMessage.success('分配用户角色成功')
  close()
  emit('success')
}

defineExpose({
  open,
})
</script>

<style scoped lang="scss">
// 使用深度样式选择器修改子组件样式
.drawer-container :deep(.el-drawer__header) {
  padding: 0 20px;
  font-size: 16px;
}
</style>
